<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://localhost:9090/frontend/invitePages.css">
  <script type="text/javascript" src="http://localhost:9090/frontend/invitePages.js"></script>
</head>
<style>
  .box {
    display: flex;
    flex-direction: column;
  }

  input {
    border: 0;
    outline: none;
  }

  .home {
    width: 100%;
    border-radius: 0.04rem;
    padding: 0.08rem;
    box-sizing: border-box;
    margin-top: 1.88rem;
    position: relative;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .agreement-button {
    border: 0rem solid #54B6AB;
    border-radius: 0.04rem;
    padding: 0.06rem 0.1rem;
    text-align: center;
    border-radius: 0.3rem;
    line-height: 1.5rem;
    height: 1.5rem;
    width: 5rem;
    color: #54B6AB;
    border: 0.01rem solid #54B6AB;
  }

  .agreement {
    background-color: #54B6AB;
    color: #fff;
  }

  .text {
    margin: 0 auto 0.04rem;
    text-align: center;
    background-color: #54B6AB;
    padding: 0.8rem 0.04rem;
    width: 100%;
    border-radius: 0.3rem;
    margin-bottom: 0.8rem;
    color: #fff;
  }

  .popup {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    border: 0rem solid #54B6AB;
    border-radius: 0.04rem;
    top: 1.25rem;
    padding: 0.08rem;
    margin-left: 0.03rem;
  }

  .confirm {
    margin-bottom: 0.04rem;
  }

  .item {
    display: flex;
    justify-content: start;
    padding: 0.04rem 0.08rem;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
  }

  .sex label {
    display: flex;
    align-items: center;
  }

  .radio {
    font-size: 0.08rem;

  }

  h2 {
    text-align: center;
  }

  #picker {
    width: 100%;
    height: 10rem;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
    touch-action: none;
  }

  #picker_column {
    width: 100%;
    height: 10rem;
  }

  .picker_item {
    height: 2.5rem;
    font-size: 2rem;
    color: rgb(194, 192, 192);
    text-align: center;
    user-select: none;
  }

  .picker_item[selected] {
    color: black;
  }

  #picker_selector {
    width: 100%;
    height: 2.5rem;
    position: absolute;
    left: -1px;
    top: 40%;
    border: 1px solid black;
    z-index: -1;
  }
</style>


<body>
  <!-- <div class="popup" id="popup">
    <div class="confirm">您确定要进行隐私授权</div>
    <div class="button">
      <div class="agreement-button">取消</div>
      <div class="agreement-button agreement">确定</div>
    </div>
  </div> -->
  <div class="box">
    <h2>邀请加入</h2>
    <div class="text">您是否接受xxx的邀请</div>
    <div class="concent">
      <div class="item">
        <label for="name">姓名： <input placeholder="请输入姓名" type="text" id="name"></label>
      </div>
      <div class="item sex">
        <label for="sex">性别： <input type="text" id="sex" placeholder="点击选择性别" />
        </label>
      </div>
      <div class="item">
        <label for="age">年龄：</label>
        <input placeholder="请输入年龄" type="text" id="age">
      </div>
      <div class="item">
        <label for="phone">手机号：</label>
        <input type="text" placeholder="请输入手机号" id="phone" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')">
      </div>


    </div>
    <div class="home">
      <div class="button">
        <div class="agreement-button">不同意</div>
        <div class="agreement-button agreement" id="agreement">同意</div>
      </div>
    </div>
  </div>

  <!-- <h1 id="code"></h1>
    <h1 id="codea"></h1> -->
</body>
<script>
  let names = ''
  let sex = ''
  let age = ''
  let phone = ''
  let nameValue = document.getElementById('name')
  let ageValue = document.getElementById('age')
  let phoneValue = document.getElementById('phone')
  nameValue.oninput = function () {
    names = this.value
    informationObj(names, sex, age, phone)
  }
  ageValue.oninput = function () {
    age = this.value
    informationObj(names, sex, age, phone)
  }
  phoneValue.oninput = function () {
    phone = this.value
    informationObj(names, sex, age, phone)
  }

  function informationObj(names, sex, age, phone) {
    console.log(names, sex, age, phone)
    let obj = {
      names: names,
      sex: sex,
      age: age,
      phone: phone,
    }
    return obj
  }


  //拿到code 拿到请求id，把这两个请求发给后端
  const codeText = document.getElementById('code')
  const codeTexta = document.getElementById('codea')
  var code = ''
  var requestId = ''
  var familyMemberId = ''

  function getUrlCode() { // 截取url中的code方法
    var url = location.search
    console.log(location.search, 'url')
    var winUrl = url
    var theRequest = new Object()
    if (url.indexOf("?") != -1) {
      var str = url.substr(1)
      var strs = str.split("&")
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
      }
    }
    code = theRequest.code
    requestId = theRequest.requestId
    familyMemberId = theRequest.familyMemberId
  }
  getUrlCode()
  infoRequest(13)
  //codeText.innerHTML = code
  // codeTexta.innerHTML = requestId
  function infoRequest(parameter) {
    axios.get(`https://zg.particlesoft.info/frontend/api/familyMember?familyMemberId=13`).then(
      res => {
        console.log(res)
      }
    )
  }
  //请求后端 那openid
  // var appid = 'wxdc7ed0f21b5d80bf&re'
  // window.location.href =
  //`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent('https://zg.particlesoft.info/frontenddev/api/OfficialAccounts')}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
  // 获取窗口宽高
  function getWindowInfo() {
    var width = window.innerWidth
    var higth = window.innerHeight
    document.querySelector('html').style.fontSize = width / 20 + 'px'

    console.log(width)
  }
  // 监听页面改变
  function listenResize() {
    window.addEventListener('resize', getWindowInfo)

  }
  getWindowInfo()
  listenResize()
  //级联选择器
  //js

  // var data = 地级市json数据，过大 就不展示了

  var data = ["男",
    "女"
  ]

  var btn = document.getElementById("sex");
  btn.onclick = function () {
    var pickerView = new PickerView({
      bindElem: btn,
      data: data,
      title: '家庭',
      leftText: '取消',
      rightText: '确定',
      rightFn: function (selectArr) {
        // 将家庭成员展示到showText类名的div中
        //document.querySelector("#sex").innerText = selectArr.join("-");
        document.getElementById("sex").value = selectArr.join("-")
      }
    });
  }
</script>

</html>
<style>
  h1 {
    font-size: 3rem;
  }
</style>